<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1.事件的绑定</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				事件的绑定
						1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名，原生有的DOM事件都可以写；
						2.事件的回调函数需要配置在methods中；
						3.methdos中的函数最终也会出现在vm上（但不存在数据代理了，是直接放在vm上的）；
						4.methods中配置的函数，是Vue所管理的函数，所以务必要写成普通函数，这样this才是vm；
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<h2>学校名称：{{name}}</h2>
			<h2>学校地址：{{address}}</h2>
			<button v-on:click="showMoreMsg">查看更多信息</button>
			<button @click="showMoreMsg">查看更多信息</button>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			let vm = new Vue({
				//el用于指定vm服务的容器
				el:'#demo',
				//data中配置着模板中要用到的数据
				data:{
					name:'尚硅谷',
					address:'宏福科技园',
					city:'北京',
					tel:'010-56253825'
				},
				//methods中配置着模板中要用到的方法
				methods:{
					showMoreMsg(){
						// console.log('@',this) //此处的this是vm
						alert(`所在城市：${this.city}，联系电话：${this.tel}`)
					}
				}
			})

		</script>
	</body>
</html>